<%--
  Created by IntelliJ IDEA.
  User: sunhao
  Date: 2015/11/10 0010
  Time: 09:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>收支列表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="doc-content">
    <div class="panel">
        <div class="panel-header">
            <h3>收支列表</h3>
        </div>
        <div class="panel-body">
            <form id="searchForm" class="form-horizontal well" action="/money/find" method="post">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">开始时间：</label>

                        <div class="controls">
                            <input type="text" class="calendar" name="startDate" style="width: auto"/>
                        </div>
                    </div>

                    <div class="control-group span8">
                        <label class="control-label">结束时间：</label>

                        <div class="controls">
                            <input type="text" class="calendar" name="endDate" style="width: auto"/>
                        </div>
                    </div>
                    <div class="span3 offset2">
                        <input value="搜索" type="submit" id="btnSearch" class="button button-primary"/>
                    </div>
                </div>
            </form>
            <div class="row">
                <div class="control-group span8" style="padding-left: 120px">
                    <label class="control-label">收入总计：<span>${incomes}</span>元</label>
                </div>
                <div class="control-group span8">
                    <label class="control-label">支出总计：<span>${expends}</span>元</label>
                </div>
                <div class="control-group span8">
                    <label class="control-label">收支余额:<span>${results}</span>元</label>
                </div>
            </div>
            <div class="row">
                <div class="span21 offset3 control-row-auto">
                    <div id="grid"></div>
                    <input type="hidden" name="eduation">
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
        <script type="text/javascript" src="/static/bui/js/bui.js"></script>
        <script type="text/javascript" src="/static/bui/js/config.js"></script>
        <%--<script type="text/javascript">--%>
        <%--BUI.use('common/page');--%>
        <%--</script>--%>
        <script type="text/javascript">

            BUI.use('bui/calendar', function (Calendar) {
                var datepicker = new Calendar.DatePicker({
                    trigger: '.calendar',
                    autoRender: true
                })
            })

            BUI.use(['bui/grid', 'bui/data', 'bui/form'], function (Grid, Data, Form) {
                var columns = [
                            {title: '日期', dataIndex: 'date', width: '20%'},
                            {title: '人员', dataIndex: 'person', width: '15%'},
                            {title: '行为', dataIndex: 'action', width: '25%'},
                            {title: '收入金额', dataIndex: 'income', width: '20%'},
                            {title: '支出金额', dataIndex: 'expend', width: '20%'}
                        ],
                //默认的数据
                        data = [
                            <c:forEach items="${moneys}" var="p">
                            {
                                date: '${p.date}',
                                person: '${p.person}',
                                action: '${p.action}',
                                income: '${p.income}',
                                expend: '${p.expend}'
                            },
                            </c:forEach>
                        ],
                        store = new Data.Store({
                            data: data,
                            pageSize: 20
                        }),
                        editing = new Grid.Plugins.DialogEditing({
                            contentId: 'resource_content',
                            triggerCls: 'btn-edit',
                            editor: {
                                focusable: false,
                                success: function () {
                                    var editType = editing.get('editType'),
                                            edtor = this,
                                            form = edtor.get("form");
                                    form.valid();
                                }
                            }
                        }),
                        grid = new Grid.Grid({
                            render: '#grid',
                            columns: columns,
                            width: '100%',
//                    forceFit: true,
                            plugins: [Grid.Plugins.AutoFit],
                            store: store,
                            bbar: {
                                pagingBar: true,
                                elCls: 'image-pbar'
                            },
                            plugins: [Grid.Plugins.CheckSelection, editing],
                            tbar: {
                                items: []
                            }
                        })
                grid.render()
            })
        </script>
    </div>
</div>
</div>
</body>
</html>
